<template>
  <div style="background-color: #fafafa;">
    <van-row id="header">
      <van-col span="14" style="padding: 0 0 0 10px;"><van-icon name="arrow-left" @click="mine" />外卖门店</van-col>
      <van-col span="2" offset="8"><van-icon :name="require('../../assets/img/消息.png')" size="20"/></van-col>
    </van-row>

    <div style="width: 96%;margin: 0 auto;">
      <!-- 评分 -->
      <van-row style="margin: 0 5px;">
        <van-col style="text-align: center;height: 140px;background-color: #FFFFFF;" span="6" >
          <p style="padding: 7px 0;margin: 0;font-size: 10px;">店铺评分</p>
          <van-circle v-model="currentRate" :rate="80" :speed="100" :text="text" />
        </van-col>
        <!-- 预计收入 -->
        <van-col style="padding-left: 10px;background-color: #FFFFFF;" span="18">
          <van-row style="height: 140px;">
            <van-col span="12" style="height: 120px;text-align: center;">
              <p style="font-size: 14px;">今日预计收入/元</p>
              <p style="font-size: 35px;font-weight: bold;margin: 0;">{{ (total * 0.7).toFixed(2) }}</p>
            </van-col>
            <van-col span="12" style="text-align: center;">
              <p style="font-size: 14px;">有效订单</p>
              <p style="font-size: 30px;font-weight: bold;margin: 0;">{{ shopOrderLength }}</p>
            </van-col>
          </van-row>
        </van-col>
      </van-row>

      <!-- 通告 -->
      <van-row id="notifications">
        <van-col span="24">
          <van-notice-bar left-icon="volume-o" :scrollable="false">
            <van-swipe
              vertical
              class="notice-swipe"
              :autoplay="3000"
              :show-indicators="false"
            >
              <van-swipe-item>内容 1</van-swipe-item>
              <van-swipe-item>内容 2</van-swipe-item>
              <van-swipe-item>内容 3</van-swipe-item>
            </van-swipe>
          </van-notice-bar>
        </van-col>
      </van-row>

      <!-- 宫格分类 -->
      <van-row id="palacegrid">
        <van-grid square>
          <!-- <van-grid-item v-for="(value,index) in itemTypeList" :key="index" :icon="require(value.img)" :text="value.text"></van-grid-item> -->
          <van-grid-item :icon="require('../../assets/img/商品管理.png')" text="商品管理" to="/item"/>
          <van-grid-item :icon="require('../../assets/img/评价.png')" text="顾客评价" />
          <van-grid-item :icon="require('../../assets/img/统计.png')" text="经营数据" />
          <van-grid-item :icon="require('../../assets/img/活动中心.png')" text="活动中心" />
          <van-grid-item :icon="require('../../assets/img/配送服务.png')" text="配送服务" />
          <van-grid-item :icon="require('../../assets/img/门店装修.png')" text="门店装修" />
          <van-grid-item :icon="require('../../assets/img/服务市场.png')" text="服务市场" />
          <van-grid-item :icon="require('../../assets/img/全部.png')" text="全部" />
        </van-grid>
      </van-row>

      <!-- 规则 -->
      <van-row id="rule">
        <van-col span="24">
          <van-cell title="规则中心" is-link></van-cell>
        </van-col>
      </van-row>

      <!-- 轮播图 -->
      <van-row id="rotationchart">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>1</van-swipe-item>
          <van-swipe-item>2</van-swipe-item>
          <van-swipe-item>3</van-swipe-item>
          <van-swipe-item>4</van-swipe-item>
        </van-swipe>
      </van-row>
    </div>
      <!-- <van-tabbar v-model="active" active-color="#1989fa" inactive-color="black">
        <van-tabbar-item :icon="require('../assets/img/订单.png')">订单</van-tabbar-item>
        <van-tabbar-item :icon="require('../assets/img/首页.png')">首页</van-tabbar-item>
        <van-tabbar-item :icon="require('../assets/img/_我的.png')" to="/my">我的</van-tabbar-item>
      </van-tabbar> -->
      <!-- <Nav></Nav> -->
  </div>
</template>

<script>
  // import Nav from './Nav.vue'
  import axios from 'axios';
export default {
  props:["shopid"],
  name: 'ShopHome',
  data(){
    return{
      itemTypeList:[
        {img:'../assets/img/商品管理.png',text:"商品管理"},
        {img:'../assets/img/评价.png',text:"顾客评价"},
        {img:'../assets/img/统计.png',text:"经营数据"},
        {img:'../assets/img/活动中心.png',text:"活动中心"}
      ],
      show:false,
      currentRate: 0,
      gradientColor:{
        '0%': '#3fecff',
        '100%': '#6149f6',
      },
      // 商家信息
      shop:this.$store.state.shop,
      successOrder:[],
      // 订单
      total:0,
      shopOrderLength:0,
    };
  },
  // components:{Nav},
  methods:{
    mine(){
      this.$router.push({path:`/mine`})
    },
    // 查询配送完成的订单
    deliveryCompleted(status){
      axios.get('/api/shop/Order/listShopIsRiderOrder', {
        params: {
          shopId: this.shop.shopId,
          status
        }
      })
      .then(response => {
        // 处理响应数据
        if (response.data.code === 200) {
          
          this.successOrder = response.data.data;

          this.successOrder.forEach(o => {
            this.total += o.totalPrice;
            this.shopOrderLength++;
          })
          console.log(this.successOrder);
        }
      })
      .catch(error => {
        // 处理错误
        console.error(error);
      });
    },
  },
  computed: {
    text() {
      return this.currentRate.toFixed(0);
    },
  },
  created() {
    this.deliveryCompleted(5)
  },
  mounted() {
    
  },
  
}
</script>
  
<style scoped>
  #header{
    background-color: #f4f4f6;
    height: 40px;
    line-height: 40px;
  }
  /* #header .van-col--14{
    font-size: 18px;
    padding: 3px;
  } */
  .my-swipe .van-swipe-item {
    color: #ffff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  #notifications{
    margin: 5px;
  }
  #palacegrid{
    margin: 5px;
  }
  #rule{
    margin: 10px;
  }
  #rotationchart{
    margin: 5px;
  }
  .notice-swipe {
    height: 40px;
    line-height: 40px;
  }
</style>
